<template>
  <div v-if="showPage" class="g-port-main page">
    <div style="background-color:White; position: relative;  ">
      <br/>
      <div style="padding: 0.2rem;">
        <button-tab v-model="type">
          <button-tab-item @on-item-click="selectType()">出口</button-tab-item>
          <!--<button-tab-item @on-item-click="selectType()">进口</button-tab-item>-->
        </button-tab>
      </div>
      <group title="查询信息">
        <selector ref="defaultValueRef" title="港口" :options="list" v-model="port" @on-change="selectType"></selector>
        <selector title="类型" :options="noTypeList" v-model="noType"></selector>
        <x-input title="单号" type="text" v-model="no" :placeholder="noPlaceholder"></x-input>
      </group>
      <br/>
      <x-button type="primary" @click.native="query()" style="height: 0.55rem;">查询</x-button>
      <!--<x-button plain type="primary" link="/type">Back</x-button>-->
    </div>
    <div id="content-pane" v-show="!isiframe" style="height: 340px;overflow-y: auto;">

      <div v-if="portContent.ContainerNbr">

        <table>
          <tbody>
          <tr>
            <td class="tdclass">箱号：</td>
            <td colspan="3"><span class="s-number" data-bind="text:ContainerNbr">{{portContent.ContainerNbr}}</span>
            </td>
          </tr>
          <tr>
            <td class="tdclass">尺寸：</td>
            <td data-bind="text:SzTpHt">{{portContent.SzTpHt}}</td>
            <td class="tdclass">ISO_CODE：</td>
            <td data-bind="text:IsoCode">{{portContent.IsoCode}}</td>
          </tr>
          <tr>
            <td class="tdclass">破损：</td>
            <td data-bind="text:Damaged">{{portContent.Damaged}}</td>
            <td class="tdclass">进出口类型：</td>
            <td data-bind="text:Category">{{portContent.Category}}</td>
          </tr>
          <tr>
            <td class="tdclass">空重：</td>
            <td data-bind="text:Status">{{portContent.Status}}</td>
            <td class="tdclass">放行状态：</td>
            <td data-bind="text:ReleaseStatus">{{portContent.ReleaseStatus}}</td>
          </tr>
          <tr>
            <td class="tdclass">位置：</td>
            <td data-bind="text:Location">{{portContent.Location}}</td>

            <td class="tdclass">港区：</td>
            <td data-bind="text:DbId">{{portContent.DbId}}</td>
          </tr>

          <tr>
            <td class="tdclass">总重(KG)：</td>
            <td data-bind="text:GrossWeight">{{portContent.GrossWeight}}</td>
            <td class="tdclass">装货港：</td>
            <td data-bind="text:PolAlias">{{portContent.PolAlias}}</td>
          </tr>
          <tr>
            <td class="tdclass">卸货港：</td>
            <td data-bind="text:PodAlias">{{portContent.PodAlias}}</td>
            <td class="tdclass">目的港：</td>
            <td data-bind="text:Destination">{{portContent.Destination}}</td>
          </tr>
          <tr>
            <td class="tdclass">船公司封条：</td>
            <td data-bind="text:LineSeal">{{portContent.SealNbr1}}</td>
            <td class="tdclass">船公司：</td>
            <td data-bind="text:LineId">{{portContent.LineId}}</td>
          </tr>
          <tr>
            <td class="tdclass">拖车号</td>
            <td data-bind="text:InTruckNbr">{{portContent.InTruckNbr}}</td>
            <td class="tdclass">是否收到CIC<br>查验(指令时间)：</td>
            <td data-bind="text:CicTime">{{portContent.CicTime}}</td>
          </tr>
          <tr>
            <td class="tdclass">VGM</td>
            <td data-bind="text:Vgm">{{portContent.Vgm}}</td>
            <td class="tdclass">VGM类型</td>
            <td data-bind="text:Vgmtype">{{portContent.Vgmtype}}</td>
          </tr>
          <tr>
            <td class="tdclass">出场时间</td>
            <td data-bind="text:OutTime">{{portContent.OutTime}}</td>
            <td class="tdclass">进场时间</td>
            <td data-bind="text:InTime">{{portContent.InTime}}</td>
          </tr>
          <tr>
            <td colspan="4"><span class="s-number" data-bind="text:ContainerNbr">{{portContent.other}}</span>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div v-else v-html="portContent">

      </div>


    </div>
    <!--您选择的是{{type}}：{{port}}-->
    <iframe v-show="isiframe" :style="[iframeStyle]" id="queryIframe" :src="url" name="queryIframe" width="100%"
            height="600px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes"
            allowtransparency="yes"></iframe>

  </div>
</template>

<script>

  import Lib from '@/assets/js/Lib'
  import {Port} from '@/assets/api/query/port'
  import {XButton, Group, Selector, ButtonTab, ButtonTabItem, XInput} from 'vux'

  let _port = new Port()
  export default {
    data() {
      return {
        iframeStyle:{'margin-top':'-0.7rem'},
        isiframe: true,
        port: 'http://www.yesinfo.com.cn/weixin/containerEnquiryResult.jsp?cntrStatus=on&x=85&y=22&cntrNo=',
        type: 0,
        noTypeList: [{value: '箱号', key: 'carton'}, {value: 'SO号', key: 'so'}],
        noType: 'so',
        noPlaceholder:'单号',
        no: '',
        list: [
          // {value: '佛山新港(佛航物流)', key: 'http://www.56cyt.com/myms/rcktc.jsp?keyword=', id: 'foshanxingang'}
          // , {
          //   value: '佛山澜石港(吉宝物流)',
          //   key: 'http://wx.keppellogfoshan.com.cn/mes_list.php?sort=export&name=',
          //   id: 'foshanlanshigang'
          // },
          //{value: '佛山三水港(三水港吉宝物流)', key: 'query-1', id: 'foshansanshuigang'},
          {
            value: '盐田(易港讯)',
            key: 'http://www.yesinfo.com.cn/weixin/containerEnquiryResult.jsp?cntrStatus=on&x=85&y=22&cntrNo=',
            id: 'shenzhenyantian'
          }
          , {value: '蛇口+赤湾(招商局港口)', key: 'action-1', id: 'shenzhenshekouchiwan'}
          , {value: '广州南沙海港(南沙海港集装箱码头)', key: 'action-2', id: 'guangzhounanshahaigang'}
          , {value: '九江码头', key: 'action-3', id: 'foshanjiujiang'}
        ],
        url: '',
        showPage: true,
        headImg: "",
        portContent: ''
      }
    },
    components: {
      XButton, Group, Selector, ButtonTab, ButtonTabItem, XInput
    },
    methods: {
      selectType: function (text) {
        // if (text == 'action-3') {
        //   this.noType ='carton';
        //   this.noPlaceholder='仅支持箱号查询';
        // }else{
        //   this.noPlaceholder='单号';
        // }
      },
      queryfoshanjiujiang: function (queryTypeId) {
        this.portContent ='';
        var url_ = "http://sc.y2t.com/iport-api-fs/tos-qry/rest/tbsContainerRest/queryCsContainerWeb";
        _port.queryPost({url: url_,'officeCode':'FSCM','no':this.no,'noType':this.noType,'id':queryTypeId}, (data) => {

          if(JSON.parse(data.result) == null ){
            return;
          }

          var array = JSON.parse(data.result).data[0].containerList;
          var obj = {};
          var htmlcontent='';
          for (var k = 0; k < array.length; k++) {
            obj = array[k];
            if(obj.typeWork=='出口舱单' || obj.typeWork=='放行申请' || obj.typeWork=='运抵报告' || obj.typeWork=='运抵报告回执' || obj.typeWork=='海关放行'){
              htmlcontent +=obj.typeWork+"("+obj.containerTaskNo+")   <br/>   "+obj.descWork+ "  <br/> "+obj.dateWork+"     <br/><br/>"
              //"      "+obj.sealNo+
            }
          }
          this.portContent = htmlcontent;
          console.log(htmlcontent);
        })
      },
      queryshenzhenshekouchiwan: function (url) {
        var url_ = "";
        if (this.noType == 'so') {
          url_ = 'http://eportapisct.scctcn.com/api/ExportCargoInfo?System=SCT&PageIndex=1&PageSize=30&SortBy=&IsDescending=false&BookingNo=' + this.no;
          if (url != '')
            url_ = url;
        } else {
          url_ = 'http://eportapisct.scctcn.com/api/GContainerInfo?System=&PageIndex=1&PageSize=30&SortBy=&IsDescending=false&ContainerNo=' + this.no;
        }
        _port.query({url: url_}, (data) => {

          var tmp_ = JSON.parse(data.result.body);
          if (tmp_.TotalCount == 1) {
            if (this.noType == 'so') {
              var obj = {};
              obj.ContainerNbr = tmp_.InnerList[0].EqNbr + '，箱型：' + tmp_.InnerList[0].SzTpHt;
              obj.ReleaseStatus = tmp_.InnerList[0].ReleaseStatus;
              obj.PolAlias = tmp_.InnerList[0].LoadPointId;
              obj.PodAlias = tmp_.InnerList[0].DischargePointId;


              obj.SealNbr1 = tmp_.InnerList[0].SealNbr1;
              obj.Vgm = tmp_.InnerList[0].Vgm;
              obj.Vgmtype = tmp_.InnerList[0].Vgmtype;
              obj.OutTime = tmp_.InnerList[0].OutDate;
              obj.InTime = tmp_.InnerList[0].InDate;

              obj.InTruckNbr = tmp_.InnerList[0].TruckId;
              obj.LineId = tmp_.InnerList[0].LineId;
              obj.Category = tmp_.InnerList[0].Category;
              obj.Status = tmp_.InnerList[0].Status;
              obj.GrossWeight = tmp_.InnerList[0].GrossWeight;
              this.portContent = obj;

            } else {
              this.portContent = tmp_.InnerList[0];
            }
          }
          console.log(this.portContent);
        })
      },
      queryguangzhounanshahaigang: function (url) {
        var url_ = "";
        if (this.noType == 'so') {
          url_ = 'http://eportal.goct.com.cn/PublicInquire/Inventory/GetInventory/?_dc=1525317908637&action=read&cName=BOOKING_NO&cFE=&page=1&start=0&limit=25&cValue=' + this.no;
        } else {
          url_ = 'http://eportal.goct.com.cn/PublicInquire/Inventory/GetInventory/?_dc=1525317908637&action=read&cName=CNTR_NO&cFE=&page=1&start=0&limit=25&cValue=' + this.no;
        }
        _port.query({url: url_}, (data) => {

          var array = JSON.parse(data.result.body).data;
          var obj = {};

          for (var k = 0; k < array.length; k++) {
            if (k == 0) {
              obj.ContainerNbr = array[k].CNTR_NO + ' 箱型：' + array[k].SZTP2 + ' 箱属:' + array[k].OPERATOR;
              obj.ReleaseStatus = array[k].FLAG;
              obj.PolAlias = array[k].POL;
              obj.PodAlias = array[k].POD;
              obj.GrossWeight = array[k].WGT;
              obj.Status = array[k].FE;
            }
            else {
              obj.ContainerNbr = obj.ContainerNbr + '<br/>' + array[k].CNTR_NO + ' 箱型：' + array[k].SZTP2 + ' 箱属:' + array[k].OPERATOR;
              obj.ReleaseStatus = obj.ReleaseStatus + '、' + array[k].FLAG;
              obj.PolAlias = obj.PolAlias + '、' + array[k].POL;
              obj.PodAlias = obj.PodAlias + '、' + array[k].POD;
              obj.GrossWeight = obj.GrossWeight + '、' + array[k].WGT;
              obj.Status = obj.Status + '、' + array[k].FE;
            }

          }
          this.portContent = obj;
          console.log(array);
          console.log(this.portContent);
        })
      },
      queryfoshansanshuigang: function (portMap) {
        _port.queryHtml({no: this.no, name: portMap.id, noType: this.noType}, (data) => {
          var tmphtml_ = data.result.body;
          this.portContent = tmphtml_;
          console.log(this.portContent);
        })
      },

      query: function () {
        var portMap = this.$refs['defaultValueRef'].getFullValue()[0];
        console.log('type:' + this.type + '  port:' + this.port + '  no:' + this.no + '    url:' + this.url);
        console.log(portMap);

        if (this.port.indexOf("http") != -1) {
          this.isiframe = true;
          this.iframeStyle={'margin-top':'-0.7rem'};
          if (this.type === 0 && this.no.length > 0) {

            var url_ = "";
            if (this.noType == 'so') {
              url_ = 'http://www.56cyt.com/myms/rso.jsp?qtype=0&keyword=' + this.no;
            } else {
              url_ = 'http://www.56cyt.com/myms/rcktc.jsp?keyword=' + this.no;
            }

            if (portMap.id == 'foshanlanshigang') {
              url_ = 'http://wx.keppellogfoshan.com.cn/mes_list.php?sort=export&name=' + this.no;
            } else if (portMap.id == 'shenzhenyantian') {
              url_ = 'http://www.yesinfo.com.cn/weixin/containerEnquiryResult.jsp?cntrStatus=on&x=85&y=22&cntrNo=' + this.no;
            }



            this.url = url_;

          } else if (this.no.length > 0) {
            //进口
          }
        } else if (this.port.indexOf("action") != -1) {
          this.isiframe = false;
          if (this.type === 0 && this.no.length > 0) {
            //出口
            if (portMap.id == 'shenzhenshekouchiwan') {
              this.queryshenzhenshekouchiwan('');
              if (this.portContent == '' && this.noType == 'so') {
                this.queryshenzhenshekouchiwan('http://eportapicct.scctcn.com/api/ExportCargoInfo?System=CCT&PageIndex=1&PageSize=30&SortBy=&IsDescending=false&BookingNo=' + this.no);
              }
            } else if (portMap.id == 'guangzhounanshahaigang') {
              this.queryguangzhounanshahaigang();
            } else if (portMap.id == 'foshanjiujiang') {
              this.queryfoshanjiujiang('foshanjiujiang');
            }


          } else if (this.no.length > 0) {
            //进口

          }
        } else if (this.port.indexOf("query") != -1) {
          this.isiframe = false;
          if (this.type === 0 && this.no.length > 0) {
            //出口
            if (portMap.id == 'foshansanshuigang') {
              this.queryfoshansanshuigang(portMap);
            }
          } else if (this.no.length > 0) {
            //进口

          }
        }


      }
    },
    mounted() {
      let _vue = this
      this.type = Lib.M.storage.getSession("type");
    }, created() {
      Lib.M.changeTitle('选择');

    }
  }
</script>

<style lang="scss">

</style>
